﻿$(function () {

    //     //  标识用户
    $(async function () {
        var tips = document.getElementsByClassName("tips")[0];
        var user = getCookie("lgc");
        // console.log(user);


        // list.html => detail.html => login.html
        // 页面加载时  有用户名就表示用户身份  没有=>去登录
        if (user) {
            tips.innerHTML = `欢迎您,${user} <button onclick="exit()">退出</button>`
        } else {
            location.href = "./login_account.html?returnUrl=" + encodeURIComponent(location.href)
        }

        //  列表跳详情 根据跳转携带的商品ID  
        var url = urlParse();
        console.log(url);
        var {
            gid
        } = url;
        var result = await searchGoodsByGoodsId({
            gid
        });
        console.log(result);
        // 解构 result  
        if (gid) {
            var {
                status,
                msg,
                data
            } = result;

            if (status) {
                // 解构data
                var {
                    goodsName,
                    goodsImg,
                    goodsPrice,
                    smallPicList,
                    bigPicList,
                    goodsDetail,
                    goodsId
                } = data;

                // 生成 HTML 结构
                var listPic = smallPicList.split(",")
                // console.log(listPic);
                var switchListHTML = "";
                listPic.forEach((img, index) => {
                    switchListHTML += `<li><img src="https:${img}" bigUrl="${listPic[index]}" alt=""></li>`
                })
                //  left
                $(".wrapAll .left").html(`
                  <div class="wrapInner">
                       <div class="shadow"></div>
                       <img class="smallImg" src="${goodsImg}" alt="">
                                    
                </div>
                <div class=" wrapInner-scale"><img src="${goodsImg}"alt=""> </div>

                <ul class="switchList">
                    ${switchListHTML}
                </ul>`);

                // right 
                $(".wrapAll .right").html(`<div class="scaleBar">
                <img class="bigImg"
                    src="${bigPicList[0]}"
                    alt="">
            </div>
            <div class="goodsInfo">
                <div class="sku-name">
                    ${goodsName}
                </div>
                <div class="summary">
                    京 东 价: <span>￥ ${goodsPrice}</span> 降价通知
                </div>
                <div class="wrap-input">
                    <a href="javascript:;" class="reduce">-</a>
                    <input type="number" class="count-input" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>
                <div class="buyGoods">
                    <button class="addToShoppingCar">加入购物车</button>
                </div>
            </div>`);

                // goodsDetail
                $(".goodsDetail").html(goodsDetail);

            } else {
                location.href = "./index.html";
            }


        } else {

            location.href = "./index.html";
        }

        // 小图添加鼠标移入事件  数据有问题 切换不了


        $(document).on("mouseenter", ".switchList li", function () {
            var bigUrl = $(this).find("img").attr("bigUrl");
            $(".smallImg,.bigImg").prop("src", bigUrl);
        })




        // 点击加入购物车
        // 谁?   买了什么东西?    买了多少件
        // 谁?            =>  当前登录的用户 
        // 买了什么东西?   =>  商品的相关信息(goodslist => 对应goodsId)
        // 买了几件        =>  $(".count-input").val();

        // 加号
        $('.add').click(function () {

            var num = $(this).prev().val();

            num++
            $(this).prev().val(num);
        })

        // 减好
        $('.reduce').click(function () {
            var num = $(this).next().val();
            if (num <= 1) return false
            num--
            $(this).next().val(num)
        })

        $(document).on("click", ".addToShoppingCar", async function () {
            console.log(111);

            // 谁? =>  当前登录的用户(判断用户是否登录) 
            var user = getCookie("lgc");
            console.log(user);
            if (user) { // 用户已登录  => 加入购物车(存数据库)

                //  商品数量
                var buyNum = $(".count-input").val()

                console.log(buyNum);
                //  查询用户点击的商品GID
                console.log(url.gid);//  用户点击的商品ID
                var goodsInfo = await searchGoodsByGoodsId({
                    gid: url.gid
                })

                console.log(goodsInfo);  // 根据商品ID 查询商品数据
                //  解构 goodsInfn
                var {
                    id,
                    goodsId,
                    goodsName,
                    goodsImg,
                    goodsPrice
                } = goodsInfo.data;
                // 获取到的数据存到数据库
                console.log(goodsName,goodsImg,goodsPrice,goodsId);
                var result = await addToShoppingCar({
                    user,
                    gid:goodsId,
                    id,
                    buyNum,
                    goodsName,
                    goodsImg,
                    goodsPrice
                })
                console.log(result);
                var {
                    status,
                    msg
                } = result ;


                if (status) {
                    if (confirm("商品购买成功,是否进入购物车?")) {
                        location.href = "./shopping.html";
                    }
                } else {
                    alert(msg);
                }

            } else { // 没有登录 => 去登录

                // 问题
                // 没有登录 => 去登录 => 登录成功(跳转主页 => 尴尬)

                // 解决方法啊?
                // 跳转登录页的同时,传递当前页的url作为 returnUrl, 登录成功再跳转回来

                location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href)
            }
        })

        //     //   放大镜
        //     //    1计算出  放大镜跟随鼠标移动的坐标  计算 盒子移动的最大距离
        //     //    2 大图比小图的比例 和 大图盒子与放大镜比例要一致
        //     //  shadow移动最大距离
        var maxLeft = $('.wrapInner').width() - $('.shadow').width();
        var maxTop = $('.wrapInner').height() - $('.shadow').height();
        // console.log(maxLeft, maxTop);

        // 放大图片的比例

        var scale = $('.bigImg').width() / $('.smallImg').width();


        // 鼠标 移入 wrapInner 盒子  事件
        $('.wrapInner').mouseover(function (e) {


            // 移入显示 
            $('.wrapInner-scale').css('display', 'block')
            $('.shadow').css('display', 'block')
            //  鼠标的位置 相对于 盒子 wrapInner 
            var wrapInnerOffset = $('.wrapInner').offset(); //  获取盒子相对于窗口的距离

            //  计算 鼠标在 盒子 wrapInner 的坐标 
            var x = e.pageX - wrapInnerOffset.left - $('.shadow').width() / 2;
            var y = e.pageY - wrapInnerOffset.top - $('.shadow').height() / 2;

            // 边距的限定

            if (x <= 0) x = 0;
            if (x >= maxLeft) x = maxLeft;
            if (y <= 0) y = 0;
            if (y >= maxTop) y = maxTop;


            $('.shadow').css({
                "left": x + 'px',
                "top": y + 'px'
            });
            $('.wrapInner-scale img').css({
                "left": -scale * x + 'px',
                "top": -scale * y + 'px'
            })


        })

        // 移出隐藏
        $('.wrapInner').mouseout(function () {

            $('.wrapInner-scale').css('display', 'none')
            $('.shadow').css('display', 'none')

        })



    })


    function urlParse() {
        var search = location.search;
        var data = {};
        if (search) { //从注册页跳转过来  => 有数据
            var str = search.substring(1);
            // console.log(str);
            var list = str.split("&");
            // console.log(list);
            list.forEach(function (item) {
                var key = item.split("=")[0];
                var val = item.split("=")[1];
                data[key] = val;
            })
        }
        return data;
    }


    function exit() {
        deleteCookie("lgc");
        location.reload();
    }


})